<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
				</div>
				<div class="flex-end-center-wrap">
					<!--<jk-date-picker v-model="searchParams.dateRange" type="datetimerange" placeholder="有效期" size="small" class="margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />-->
					<jk-search-input v-model="searchParams.nameOrCode" placeholder="品种编号或名称" size="small" class="search-bar-item-size3 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<!--<jk-search-input v-model="searchParams.typeNameOrCode" placeholder="存货类型" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />-->
					<!--<jk-search-input v-model="searchParams.yarnCount" placeholder="支数" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />-->
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>

		<jk-card>
			<jk-table border :loading="tableLoading" :data="tableData" :height="tableHeight + 20">
				<vxe-column title="品种" align="left" field="productName" :width="210" />
				<vxe-column :visible="pageFrom === 2" title="支数" align="left" field="yarnCount" :width="90" />
				<vxe-column title="存货类型" align="left" field="typeName" :width="90" />
				<vxe-column title="物料分类" align="left" field="categoryName" :width="90" />
				<vxe-column :title="pageFrom === 1 ? '单价' : '加工费'" align="right" field="price" :width="180">
					<template slot-scope="scope">
						<jk-number-input v-if="scope.row.isEdit" v-model="scope.row.price" size="mini"></jk-number-input>
						<span v-else>{{ scope.row.price }}</span>
					</template>
				</vxe-column>
				<vxe-column :visible="pageFrom === 1" title="有效期" align="center" field="effectiveStartDate" :width="360">
					<template slot-scope="scope">
						<div v-if="scope.row.isEdit" class="flex-center">
							<jk-date-picker v-model="scope.row.dateRange" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" size="mini" @change="onDateChange($event, scope)"></jk-date-picker>
						</div>
						<span v-else>{{ scope.row.effectiveStartDate ? `${scope.row.effectiveStartDate}~${scope.row.effectiveEndDate}` : '' }}</span>
					</template>
				</vxe-column>
				<vxe-column :visible="pageFrom === 1" title="采购员" align="left" field="empName" :width="160">
					<template slot-scope="scope">
						<remote-search-emp-input
							v-if="scope.row.isEdit"
							size="mini"
							placeholder="采购员"
							only-key="empId"
							query-name="empName"
							:form-data="scope.row"
							@on-select="onSelectEmpChange($event, scope)"
						></remote-search-emp-input>
						<span v-else>{{ scope.row.empName }}</span>
					</template>
				</vxe-column>
				<vxe-column :visible="pageFrom === 1" title="采购时间" align="left" field="empName" :width="200">
					<template slot-scope="scope">
						<jk-date-picker v-if="scope.row.isEdit" v-model="scope.row.purchaseTime" type="datetime" placeholder="采购时间" size="mini"></jk-date-picker>
						<span v-else>{{ scope.row.purchaseTime }}</span>
					</template>
				</vxe-column>
				<vxe-column title="创建人" align="left" field="creatorName" :min-width="100" />
				<vxe-column title="创建时间" align="left" field="createTime" :width="160" />
				<vxe-column title="修改人" align="left" field="updaterName" :min-width="100" />
				<vxe-column title="修改时间" align="left" field="updateTime" :width="160" />
				<vxe-column title="操作" align="center" field="operation" fixed="right" :width="120">
					<template slot-scope="scope">
						<div v-if="!scope.row.isEdit">
							<el-button icon="el-icon-time" size="mini" type="primary" @click="onSeeHistoryBtn(scope)"></el-button>
							<el-button :disabled="isEdit" icon="el-icon-edit" size="mini" type="primary" @click="onToggleEditBtn(scope, true)"></el-button>
						</div>
						<div v-else>
							<el-button icon="el-icon-close" size="mini" type="danger" @click="onToggleEditBtn(scope, false)"></el-button>
							<el-button icon="el-icon-check" size="mini" type="success" @click="onSaveBtn(scope)"></el-button>
						</div>
					</template>
				</vxe-column>
			</jk-table>
			<!-- 分页组件 -->
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="totalCount"
					@on-change="onPageChange"
				/>
			</footer>
		</jk-card>
		<detail-dialog
			:page-from="pageFrom"
			:data-id="dataId"
			:dialog-state="detailDialogState"
			@on-visible-change="onVisibleChangeOfDetailDialog"
		></detail-dialog>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { pageConfig } from '/src/utils/jk/jk-tool';
    import { auditStateList } from '../../../utils/jk/status-option-list';
    import getMenuColumn from '../../../mixins/getMenuColumn';
    import { quotationProductPricePage, quotationProductPriceUpdate } from '../../../api/price/rawPrice';
    import remoteSearchEmpInput from '../customerQuotation/components/remote-search-emp-input';
    import detailDialog from './detail-dialog';

    export default {
        name: 'ProductBenchmarkParams',
        props: {
            pageFrom: {
                type: Number,
                default: 1 // 1: 原料价格 2：成品加工费
            }
        },
        components: {
            detailDialog,
            remoteSearchEmpInput
        },
        mixins: [calHeight, getMenuColumn],
        data() {
            return {
                apiItem: {
                    'page': quotationProductPricePage
                },
                isEdit: false,
                detailDialogState: false,
                prefix: 'spin:productCriterionParams',
                auditStateList: auditStateList,
                dataId: null,
                workshopList: [],
                tableLoading: true,
                tableData: [],
                totalCount: 0,
                searchParams: {
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    yarnCount: null,
                    auditState: null,
                    dateRange: '',
                    nameOrCode: '',
                    typeNameOrCode: this.pageFrom === 1 ? 'RAW_MATERIAL' : 'FINISHED_PRODUCT'
                }
            };
        },
        mounted() {
            this.getDependentData();
        },
        methods: {
            onVisibleChangeOfDetailDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.detailDialogState = e;
            },
            onSeeHistoryBtn(e) {
                this.dataId = e.row.id;
                this.detailDialogState = true;
            },
            onDateChange(e, scope) {
                this.$set(this.tableData[scope.rowIndex], 'effectiveStartDate', e[0]);
                this.$set(this.tableData[scope.rowIndex], 'effectiveEndDate', e[1]);
            },
            onSelectEmpChange(e, scope) {
                if (Object.keys(e).length) {
                    this.$set(this.tableData[scope.rowIndex], 'empId', e.id);
                    this.$set(this.tableData[scope.rowIndex], 'empCode', e.code);
                    this.$set(this.tableData[scope.rowIndex], 'empName', e.name);
                }
            },
            onSaveBtn(scope) {
                const params = {
                    'effectiveEndDate': '',
                    'effectiveStartDate': '',
                    'empCode': '',
                    'empId': 0,
                    'empName': '',
                    'price': 0,
                    'productCode': '',
                    'productId': 0,
                    'productModels': '',
                    'productName': '',
                    'purchaseTime': '',
                    'remark': '',
                    'typeId': 0,
                    'typeName': '',
                    'yarnCount': 0
                };
                for (const key in params) {
                    params[key] = scope.row[key];
                }
                quotationProductPriceUpdate(params).then(res => {
                    this.isEdit = false;
                    if (res.data.status === 200) {
                        this.getListRequest();
                    }
                });
            },
            onToggleEditBtn(scope, e) {
                this.isEdit = e;
                this.$set(this.tableData[scope.rowIndex], 'isEdit', e);
            },
            onSearchBtn() {
                this.$set(this.searchParams, 'pageNo', 1);
                this.getListRequest();
            },
            onPageChange(e, size) {
                this.$set(this.searchParams, 'pageNo', e);
                this.$set(this.searchParams, 'pageSize', size);
                this.getListRequest();
            },
            async getDependentData() {
                this.tableLoading = true;
                await this.getMenuColumnListRequest();
                await this.getListRequest();
                this.tableLoading = false;
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                return this.apiItem['page'](this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res ? res.data.res.map(x => {
                            x.dateRange = x.effectiveStartDate ? [x.effectiveStartDate, x.effectiveEndDate] : [];
                            x.isEdit = false;
                            return x;
                        }) : [];
                        this.totalCount = res.data.count;
                    }
                });
            },

            /** 删除按钮操作 */
            onDeleteBtn(row) {
                this.apiItem['delete']({ id: row.id }).then((res) => {
                    if (res.data.status === 200) {
                        this.getListRequest();
                        this.$tipsBar(this, 'delete');
                    }
                }).catch(() => {});
            }
        }
    };
</script>
